<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Task Manager - Interactive Pickers</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary: #3a86ff;
      --secondary: #8338ec;
      --accent: #ff006e;
      --bg: #f8fafc;
      --card: #ffffff;
      --text: #1e293b;
      --border: #e2e8f0;
      --column-bg: #f1f5f9;
      --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
      --radius: 8px;
      --header-pattern: repeating-linear-gradient(45deg,
          rgba(255, 255, 255, 0.05) 0px,
          rgba(255, 255, 255, 0.05) 2px,
          transparent 2px,
          transparent 6px);
    }

    [data-theme="dark"] {
      --bg: #0f172a;
      --card: #1e293b;
      --text: #f1f5f9;
      --border: #334155;
      --column-bg: #1e293b;
      --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
      --primary: #60a5fa;
      --secondary: #818cf8;
      --accent: #f472b6;
      --text-light: #94a3b8;
      --header-pattern: repeating-linear-gradient(45deg,
          rgba(255, 255, 255, 0.03) 0px,
          rgba(255, 255, 255, 0.03) 2px,
          transparent 2px,
          transparent 6px);
    }

    [data-theme="dark"] .header {
      background: linear-gradient(135deg, #1e40af, #4c1d95);
    }

    [data-theme="dark"] .add-task {
      background: rgba(255, 255, 255, 0.02);
      border-color: var(--border);
      color: var(--text-light);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    [data-theme="dark"] .add-task:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--primary);
      color: var(--text);
      transform: translateY(-2px);
    }

    [data-theme="dark"] .task {
      background: rgba(30, 41, 59, 0.8);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2),
        0 2px 4px -1px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid var(--border);
    }

    [data-theme="dark"] .task:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
        0 4px 6px -2px rgba(0, 0, 0, 0.2);
      background: rgba(30, 41, 59, 0.9);
    }

    [data-theme="dark"] .task::after {
      color: var(--text-light);
    }

    [data-theme="dark"] .modal__content {
      background: var(--card);
      color: var(--text);
      border: 1px solid var(--border);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }

    [data-theme="dark"] .form-group input,
    [data-theme="dark"] .form-group textarea {
      background: rgba(15, 23, 42, 0.6);
      color: var(--text);
      border-color: var(--border);
    }

    [data-theme="dark"] .form-group input:focus,
    [data-theme="dark"] .form-group textarea:focus {
      border-color: var(--primary);
      outline: none;
      box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
    }

    [data-theme="dark"] .task__date {
      color: var(--text-light);
    }

    [data-theme="dark"] .column.drag-over {
      background-color: rgba(96, 165, 250, 0.1);
    }

    [data-theme="dark"] .task-list.drag-over {
      background: rgba(255, 255, 255, 0.03);
    }

    [data-theme="dark"] .theme-toggle {
      background: rgba(255, 255, 255, 0.05);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] .theme-toggle:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .header__stat {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .btn {
      background: var(--primary);
      color: var(--text);
    }

    [data-theme="dark"] .btn:hover {
      background: var(--secondary);
      transform: translateY(-1px);
    }

    [data-theme="dark"] .modal__close {
      color: var(--text-light);
    }

    [data-theme="dark"] .modal__close:hover {
      color: var(--text);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Montserrat', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .header {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      background-size: 400% 400%;
      color: white;
      padding: 2.5rem 1.5rem;
      text-align: center;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
      animation: gradientAnimation 15s ease infinite;
    }

    @keyframes gradientAnimation {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--header-pattern);
    }

    .header__content {
      position: relative;
      z-index: 1;
      max-width: 800px;
      margin: 0 auto;
    }

    .header__title {
      font-size: 3rem;
      margin-bottom: 1rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      letter-spacing: 1px;
      animation: slideDown 0.5s ease-out;
    }

    .header__subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
      font-weight: 400;
      animation: slideUp 0.5s ease-out 0.2s backwards;
    }

    .header__stats {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin-top: 1.5rem;
      animation: fadeIn 0.5s ease-out 0.4s backwards;
    }

    .header__stat {
      background: rgba(255, 255, 255, 0.1);
      padding: 0.75rem 1.5rem;
      border-radius: var(--radius);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    .header__stat-value {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 0.25rem;
    }

    .header__stat-label {
      font-size: 0.9rem;
      opacity: 0.8;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .header {
        padding: 2rem 1rem;
      }

      .header__title {
        font-size: 2.5rem;
      }

      .header__stats {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
      }

      .header__stat {
        width: 100%;
        max-width: 300px;
      }
    }

    .container {
      max-width: 1600px;
      margin: 2rem auto;
      padding: 0 2rem;
      flex: 1;
    }

    .board {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
      justify-content: center;
    }

    .column {
      background: var(--column-bg);
      border-radius: var(--radius);
      padding: 1.5rem;
      min-height: 400px;
      transition: background-color 0.2s;
    }

    .column.drag-over {
      background-color: rgba(58, 134, 255, 0.1);
    }

    .column__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .column__title {
      font-size: 1.2rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .task-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      min-height: 200px;
      padding: 0.5rem;
      transition: padding 0.2s;
    }

    .task-list.drag-over {
      padding: 1rem;
      background: rgba(255, 255, 255, 0.5);
      border-radius: var(--radius);
    }

    .task {
      background: var(--card);
      border-radius: var(--radius);
      padding: 1rem;
      box-shadow: var(--shadow);
      transition: transform 0.2s, opacity 0.2s;
      cursor: move;
      -webkit-user-select: none;
      user-select: none;
      position: relative;
    }

    .task.dragging {
      opacity: 0.5;
      cursor: grabbing;
    }

    .task:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow), 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .task::after {
      content: '⋮';
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      font-size: 1.2rem;
      color: #666;
      cursor: pointer;
    }

    .task.dragging::after {
      cursor: grabbing;
    }

    .task__header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.5rem;
    }

    .task__title {
      font-weight: 600;
    }

    .task__content {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .task__footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1rem;
      font-size: 0.9rem;
    }

    .task__date {
      color: #666;
    }

    .add-task {
      background: rgba(255, 255, 255, 0.8);
      border: 2px dashed var(--border);
      border-radius: var(--radius);
      padding: 1rem;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
    }

    .add-task:hover {
      background: white;
      border-color: var(--primary);
    }

    /* Modal styles */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .modal.show {
      display: flex;
    }

    .modal__content {
      background: white;
      padding: 2rem;
      border-radius: var(--radius);
      width: 90%;
      max-width: 500px;
      position: relative;
    }

    .modal__close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: #666;
    }

    .task-form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .form-group label {
      font-weight: 600;
      color: var(--text);
    }

    .form-group input,
    .form-group textarea {
      padding: 0.5rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: inherit;
    }

    .picker-group {
      display: flex;
      gap: 1rem;
      align-items: center;
    }

    .color-picker {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    input[type="color"] {
      -webkit-appearance: none;
      appearance: none;
      width: 50px;
      height: 50px;
      padding: 0;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      background: none;
      transition: transform 0.2s;
    }

    input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0;
      border: none;
      border-radius: 50%;
    }

    input[type="color"]::-webkit-color-swatch {
      border: 2px solid var(--border);
      border-radius: 50%;
    }

    input[type="color"]::-moz-color-swatch {
      border: 2px solid var(--border);
      border-radius: 50%;
    }

    input[type="color"]:hover {
      transform: scale(1.1);
    }

    .color-picker span {
      color: var(--text-light);
      font-size: 0.9rem;
    }

    .btn {
      padding: 0.75rem 1.5rem;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      font-weight: 600;
      transition: all 0.2s;
    }

    .btn:hover {
      background: var(--secondary);
    }

    .task__image {
      width: 100%;
      height: 120px;
      object-fit: cover;
      border-radius: var(--radius);
      margin-top: 0.5rem;
    }

    @media (min-width: 1200px) {
      .board {
        grid-template-columns: repeat(3, minmax(400px, 1fr));
      }
    }

    .theme-toggle {
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      transition: all 0.3s ease;
    }

    .theme-toggle:hover {
      transform: scale(1.1);
    }

    /* Footer styles */
    .footer {
      margin-top: auto;
      padding: 1rem;
      background: var(--card);
      border-top: 1px solid var(--border);
      text-align: center;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      position: sticky;
      bottom: 0;
      width: 100%;
      z-index: 10;
    }

    .social-links {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin: 0;
      flex-wrap: wrap;
      padding: 0.25rem;
    }

    .social-link {
      color: var(--text-light);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.35rem 0.75rem;
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: all 0.3s ease;
      font-size: 0.85rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .social-link:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.05);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    @media (max-width: 768px) {
      .social-links {
        padding: 0.15rem;
      }

      .social-link {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
      }
    }

    [data-theme="dark"] .footer {
      background: rgba(30, 41, 59, 0.8);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] .social-link {
      background: rgba(255, 255, 255, 0.02);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] .social-link:hover {
      background: rgba(255, 255, 255, 0.05);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    .task__actions {
      position: absolute;
      top: 0.5rem;
      right: 1.5rem;
      display: none;
      gap: 0.5rem;
    }

    .task:hover .task__actions {
      display: flex;
    }

    .action-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.25rem;
      border-radius: 4px;
      transition: all 0.2s;
    }

    .action-btn:hover {
      background: rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] .action-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .confirmation-check {
      font-size: 4rem;
      animation: checkBounce 0.5s ease;
    }

    @keyframes checkBounce {
      0% {
        transform: scale(0);
      }

      50% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
      }
    }

    .modal__content {
      transition: all 0.3s ease;
    }

    .modal.show .modal__content {
      animation: modalSlideIn 0.3s ease;
    }

    @keyframes modalSlideIn {
      from {
        transform: translateY(-20px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    #confirmationModal .modal__content {
      background: var(--card);
      color: var(--text);
      max-width: 400px;
      text-align: center;
      padding: 2rem;
    }

    #confirmationModal h3 {
      margin: 1rem 0;
      color: var(--primary);
    }

    #confirmationMessage {
      color: var(--text);
    }

    /* Help button styles */
    .help-toggle {
      position: fixed;
      top: 1rem;
      right: 4rem;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      transition: all 0.3s ease;
    }

    .help-toggle:hover {
      transform: scale(1.1);
      background: rgba(255, 255, 255, 0.2);
    }

    /* Help modal styles */
    .help-modal__content {
      max-width: 650px;
      max-height: 85vh;
      overflow-y: auto;
      padding: 0;
    }

    .help-header {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: white;
      padding: 1.5rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      border-radius: var(--radius) var(--radius) 0 0;
    }

    .help-icon {
      font-size: 2.5rem;
    }

    .help-header h2 {
      margin: 0;
      font-size: 1.8rem;
    }

    .help-intro {
      padding: 1.5rem 1.5rem 0.5rem;
      color: var(--text);
      font-size: 1.1rem;
      border-bottom: 1px solid var(--border);
      margin: 0;
    }

    .help-content {
      padding: 1.5rem;
    }

    .help-section {
      margin-bottom: 2rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .help-section-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem 1.5rem;
      background: rgba(0, 0, 0, 0.03);
      border-bottom: 1px solid var(--border);
    }

    .help-section-icon {
      font-size: 1.5rem;
    }

    .help-section h3 {
      margin: 0;
      color: var(--primary);
      font-size: 1.3rem;
    }

    .help-section-content {
      padding: 1.5rem;
    }

    .help-section-content p {
      margin-top: 0;
      margin-bottom: 1rem;
    }

    .help-section-content ul,
    .help-section-content ol {
      padding-left: 1.5rem;
      margin-bottom: 0;
    }

    .help-section-content li {
      margin-bottom: 0.75rem;
      line-height: 1.5;
    }

    .help-section-content li:last-child {
      margin-bottom: 0;
    }

    .help-section-content strong {
      color: var(--primary);
    }

    .help-footer {
      padding: 1rem 1.5rem 1.5rem;
      text-align: center;
      border-top: 1px solid var(--border);
    }

    .help-close-btn {
      min-width: 120px;
    }

    [data-theme="dark"] .help-toggle {
      background: rgba(255, 255, 255, 0.05);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] .help-toggle:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .help-section {
      background: rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] .help-section-header {
      background: rgba(0, 0, 0, 0.2);
    }
  </style>
</head>

<body>
  <button class="theme-toggle" id="themeToggle">🌙</button>
  <button class="help-toggle" id="helpToggle">❓</button>

  <!-- Help modal -->
  <div class="modal" id="helpModal">
    <div class="modal__content help-modal__content">
      <button class="modal__close" onclick="closeHelpModal()">&times;</button>
      <div class="help-header">
        <div class="help-icon">📘</div>
        <h2>User Guide</h2>
      </div>
      <p class="help-intro">Welcome to Task Manager! This guide will help you get the most out of this application.</p>

      <div class="help-content">
        <section class="help-section">
          <div class="help-section-header">
            <div class="help-section-icon">🎯</div>
            <h3>Getting Started</h3>
          </div>
          <div class="help-section-content">
            <p>Task Manager helps you organize your work with a simple kanban board:</p>
            <ul>
              <li><strong>To Do</strong> - Tasks you haven't started yet</li>
              <li><strong>In Progress</strong> - Tasks you're currently working on</li>
              <li><strong>Done</strong> - Tasks you've completed</li>
            </ul>
          </div>
        </section>

        <section class="help-section">
          <div class="help-section-header">
            <div class="help-section-icon">➕</div>
            <h3>Creating Tasks</h3>
          </div>
          <div class="help-section-content">
            <p>To create a new task:</p>
            <ol>
              <li>Click the <strong>"+ Add Task"</strong> button in any column</li>
              <li>Fill in the task details (title is required)</li>
              <li>Customize your task with a deadline, color, and image</li>
              <li>Click <strong>"Add Task"</strong> to save</li>
            </ol>
          </div>
        </section>

        <section class="help-section">
          <div class="help-section-header">
            <div class="help-section-icon">🔄</div>
            <h3>Managing Tasks</h3>
          </div>
          <div class="help-section-content">
            <p>You can easily manage your tasks with these actions:</p>
            <ul>
              <li><strong>Move</strong> - Drag and drop tasks between columns to update their status</li>
              <li><strong>Edit</strong> - Click the ✏️ icon to modify a task's details</li>
              <li><strong>Delete</strong> - Click the 🗑️ icon to remove a task (confirmation required)</li>
            </ul>
          </div>
        </section>

        <section class="help-section">
          <div class="help-section-header">
            <div class="help-section-icon">💡</div>
            <h3>Pro Tips</h3>
          </div>
          <div class="help-section-content">
            <ul>
              <li><strong>Local Storage</strong> - Your tasks are automatically saved in your browser</li>
              <li><strong>Dark Mode</strong> - Toggle between light and dark themes with the 🌙/☀️ button</li>
              <li><strong>Task Stats</strong> - View your progress with the counters at the top of the page</li>
              <li><strong>Task Colors</strong> - Use colors to categorize or prioritize your tasks</li>
              <li><strong>Images</strong> - Add images to tasks that need visual context</li>
            </ul>
          </div>
        </section>
      </div>

      <div class="help-footer">
        <button class="btn help-close-btn" onclick="closeHelpModal()">Got it!</button>
      </div>
    </div>
  </div>

  <header class="header">
    <div class="header__content">
      <h1 class="header__title">Task Manager</h1>
      <p class="header__subtitle">Manage your tasks with style</p>
      <div class="header__stats">
        <div class="header__stat">
          <div class="header__stat-value" id="totalTasks">0</div>
          <div class="header__stat-label">Total Tasks</div>
        </div>
        <div class="header__stat">
          <div class="header__stat-value" id="completedTasks">0</div>
          <div class="header__stat-label">Completed</div>
        </div>
        <div class="header__stat">
          <div class="header__stat-value" id="inProgressTasks">0</div>
          <div class="header__stat-label">In Progress</div>
        </div>
      </div>
    </div>
  </header>

  <div class="container">
    <div class="board">
      <div class="column" id="todo">
        <div class="column__header">
          <h2 class="column__title">📝 To Do</h2>
          <span class="column__count">0</span>
        </div>
        <div class="task-list">
          <div class="add-task">+ Add Task</div>
        </div>
      </div>

      <div class="column" id="progress">
        <div class="column__header">
          <h2 class="column__title">🔄 In Progress</h2>
          <span class="column__count">0</span>
        </div>
        <div class="task-list">
          <div class="add-task">+ Add Task</div>
        </div>
      </div>

      <div class="column" id="done">
        <div class="column__header">
          <h2 class="column__title">✅ Done</h2>
          <span class="column__count">0</span>
        </div>
        <div class="task-list">
          <div class="add-task">+ Add Task</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="footer">
    <div class="social-links">
      <a href="https://github.com/mickaellherminez" class="social-link" target="_blank" rel="noopener">
        <span>👨‍💻</span> GitHub
      </a>
      <a href="https://www.linkedin.com/in/mickaellherminez" class="social-link" target="_blank" rel="noopener">
        <span>💼</span> LinkedIn
      </a>
      <a href="https://twitter.com/mickaelherminez" class="social-link" target="_blank" rel="noopener">
        <span>🐦</span> Twitter
      </a>
      <a href="https://bsky.app/profile/mickaellherminez.bsky.social" class="social-link" target="_blank" rel="noopener">
        <span>🦋</span> Bluesky
      </a>
      <a href="https://codepen.io/mickaellherminez" class="social-link" target="_blank" rel="noopener">
        <span>✨</span> CodePen
      </a>
    </div>
  </footer>

  <!-- Modal for adding/editing a task -->
  <div class="modal" id="taskModal">
    <div class="modal__content">
      <button class="modal__close" onclick="closeModal()">&times;</button>
      <h2>New Task</h2>
      <form class="task-form" id="taskForm">
        <input type="hidden" id="editTaskId">
        <input type="hidden" id="columnType">
        <div class="form-group">
          <label for="taskTitle">Title</label>
          <input type="text" id="taskTitle" required>
        </div>
        <div class="form-group">
          <label for="taskDescription">Description</label>
          <textarea id="taskDescription" rows="3"></textarea>
        </div>
        <div class="form-group">
          <label for="taskDeadline">Deadline</label>
          <input type="datetime-local" id="taskDeadline">
        </div>
        <div class="form-group">
          <label>Task Color</label>
          <div class="color-picker">
            <input type="color" id="taskColor" value="#3a86ff">
            <span>Choose a color for your task</span>
          </div>
        </div>
        <div class="form-group">
          <label for="taskImage">Image</label>
          <input type="file" id="taskImage" accept="image/*">
        </div>
        <button type="submit" class="btn">Add Task</button>
      </form>
    </div>
  </div>

  <!-- Confirmation modal -->
  <div class="modal" id="confirmationModal">
    <div class="modal__content">
      <div class="confirmation-check">✅</div>
      <h3>Success!</h3>
      <p id="confirmationMessage"></p>
    </div>
  </div>

  <!-- Delete confirmation modal -->
  <div class="modal" id="deleteConfirmationModal">
    <div class="modal__content">
      <h3>Confirm Deletion</h3>
      <p>Are you sure you want to delete this task?</p>
      <div style="display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem;">
        <button class="btn" id="cancelDeleteBtn">Cancel</button>
        <button class="btn" style="background: var(--accent)" id="confirmDeleteBtn">Delete</button>
      </div>
    </div>
  </div>

  <script>
    // Variables globales pour les fonctions de suppression
    let currentTaskToDelete = null;
    // Fonction pour afficher la confirmation
    function showConfirmation(message) {
      const modal = document.getElementById('confirmationModal');
      const messageElement = document.getElementById('confirmationMessage');
      if (message.includes('supprimée')) {
        message = 'Task successfully deleted! 🗑️';
      } else if (message.includes('mise à jour')) {
        message = 'Task successfully updated! 🎉';
      } else if (message.includes('créée')) {
        message = 'Task successfully created! 🎉';
      }
      messageElement.textContent = message;
      modal.classList.add('show');
      setTimeout(() => {
        modal.classList.remove('show');
      }, 3000);
    }
    // Fonction pour fermer la modale
    function closeModal() {
      document.getElementById('taskModal').classList.remove('show');
    }

    function confirmDelete() {
      const tasks = JSON.parse(localStorage.getItem('tasks') || '[]');
      const filteredTasks = tasks.filter(t => t.id !== currentTaskToDelete);
      localStorage.setItem('tasks', JSON.stringify(filteredTasks));
      const taskElement = document.querySelector(`[data-task-id="${currentTaskToDelete}"]`);
      if (taskElement) {
        taskElement.remove();
      }
      document.getElementById('deleteConfirmationModal').classList.remove('show');
      // Mettre à jour les compteurs et afficher la confirmation
      updateAllCounts();
      showConfirmation('Task successfully deleted! 🗑️');
      currentTaskToDelete = null;
    }

    function updateAllCounts() {
      const columns = ['todo', 'progress', 'done'];
      columns.forEach(columnType => {
        const column = document.getElementById(columnType);
        const tasksInColumn = column.querySelectorAll('.task-list > .task');
        column.querySelector('.column__count').textContent = tasksInColumn.length;
      });
      const totalTasks = document.querySelectorAll('.task').length;
      const completedTasks = document.querySelector('#done').querySelectorAll('.task').length;
      const inProgressTasks = document.querySelector('#progress').querySelectorAll('.task').length;
      document.getElementById('totalTasks').textContent = totalTasks;
      document.getElementById('completedTasks').textContent = completedTasks;
      document.getElementById('inProgressTasks').textContent = inProgressTasks;
    }

    function cancelDelete() {
      currentTaskToDelete = null;
      document.getElementById('deleteConfirmationModal').classList.remove('show');
    }

    function deleteTask(taskId) {
      currentTaskToDelete = taskId;
      document.getElementById('deleteConfirmationModal').classList.add('show');
    }
    document.addEventListener('DOMContentLoaded', function() {
      // Ajouter les écouteurs d'événements pour les boutons de suppression
      document.getElementById('confirmDeleteBtn').addEventListener('click', confirmDelete);
      document.getElementById('cancelDeleteBtn').addEventListener('click', cancelDelete);
      // Configuration du thème
      const themeToggle = document.getElementById('themeToggle');
      const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
      // Initialiser le thème
      function initTheme() {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme) {
          document.documentElement.setAttribute('data-theme', savedTheme);
          updateThemeIcon(savedTheme);
        } else if (prefersDarkScheme.matches) {
          document.documentElement.setAttribute('data-theme', 'dark');
          updateThemeIcon('dark');
        }
      }

      function updateThemeIcon(theme) {
        themeToggle.textContent = theme === 'dark' ? '☀️' : '🌙';
      }
      // Gérer le changement de thème
      themeToggle.addEventListener('click', () => {
        const currentTheme = document.documentElement.getAttribute('data-theme');
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        document.documentElement.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme);
        updateThemeIcon(newTheme);
      });
      // Initialiser le thème au chargement
      initTheme();
      const modal = document.getElementById('taskModal');
      const taskForm = document.getElementById('taskForm');
      const columns = document.querySelectorAll('.column');
      // Initialisation des tâches par défaut si aucune n'existe
      let tasks = JSON.parse(localStorage.getItem('tasks') || '[]');
      if (!tasks || tasks.length === 0) {
        tasks = [{
            id: "default1",
            column: "todo",
            title: "Visit all of Mickael Lherminez's pens",
            description: "Discover all of Mickael Lherminez's pens and leave a nice comment!",
            deadline: new Date().toISOString(),
            color: "#3a86ff",
            image: null
          },
          {
            id: "default2",
            column: "todo",
            title: "Like and comment this pen",
            description: "Give a like and comment on this pen to show your appreciation!",
            deadline: new Date().toISOString(),
            color: "#3a86ff",
            image: null
          }
        ];
        localStorage.setItem('tasks', JSON.stringify(tasks));
      }
      // Configuration du drag & drop sur les colonnes
      columns.forEach(column => {
        column.addEventListener('dragover', e => {
          e.preventDefault();
          const draggingTask = document.querySelector('.dragging');
          const taskList = column.querySelector('.task-list');
          const afterElement = getDragAfterElement(taskList, e.clientY);
          if (afterElement) {
            taskList.insertBefore(draggingTask, afterElement);
          } else {
            taskList.appendChild(draggingTask);
          }
        });
        column.addEventListener('drop', e => {
          e.preventDefault();
          const taskId = e.dataTransfer.getData('text/plain');
          const task = tasks.find(t => t.id === taskId);
          const prevColumn = task.column;
          task.column = column.id;
          saveTasks();
          updateAllCounts();
          updateColumnCount(prevColumn);
          const draggingTask = document.querySelector(`[data-task-id="${taskId}"]`);
          draggingTask.classList.remove('dragging');
          draggingTask.style.transform = 'scale(1.02)';
          setTimeout(() => {
            draggingTask.style.transform = 'scale(1)';
          }, 200);
        });
      });
      // Fonction pour déterminer la position de drop
      function getDragAfterElement(container, y) {
        const draggableElements = [...container.querySelectorAll('.task:not(.dragging)')];
        return draggableElements.reduce((closest, child) => {
          const box = child.getBoundingClientRect();
          const offset = y - box.top - box.height / 2;
          if (offset < 0 && offset > closest.offset) {
            return {
              offset: offset,
              element: child
            };
          } else {
            return closest;
          }
        }, {
          offset: Number.NEGATIVE_INFINITY
        }).element;
      }
      // Soumission du formulaire
      taskForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        const taskId = this.dataset.editId;
        if (taskId) {
          // Récupérer l'élément DOM existant avant la mise à jour
          const existingTaskElement = document.querySelector(`[data-task-id="${taskId}"]`);
          // Vérifier si l'élément existe avant d'accéder à ses propriétés
          let parentColumn = null;
          if (existingTaskElement) {
            parentColumn = existingTaskElement.closest('.column').id;
          }
          // Mettre à jour la tâche dans le tableau
          const taskIndex = tasks.findIndex(t => t.id === taskId);
          if (taskIndex !== -1) {
            tasks[taskIndex] = {
              ...tasks[taskIndex],
              title: document.getElementById('taskTitle').value,
              description: document.getElementById('taskDescription').value,
              deadline: document.getElementById('taskDeadline').value,
              color: document.getElementById('taskColor').value,
              column: document.getElementById('columnType').value
            };
            // Supprimer l'ancien élément seulement si la colonne change et si l'élément existe
            if (existingTaskElement && parentColumn !== tasks[taskIndex].column) {
              existingTaskElement.remove();
              updateColumnCount(parentColumn);
            }
            // Mettre à jour l'affichage sans recharger toutes les tâches
            if (existingTaskElement && parentColumn === tasks[taskIndex].column) {
              renderTask(tasks[taskIndex], true); // true pour indiquer une mise à jour
            } else {
              // Si l'élément n'existe pas ou a changé de colonne, le rendre à nouveau
              renderTask(tasks[taskIndex]);
            }
          }
          delete this.dataset.editId;
        } else {
          // Créer une nouvelle tâche
          await createTask({
            columnType: document.getElementById('columnType').value,
            title: document.getElementById('taskTitle').value,
            description: document.getElementById('taskDescription').value,
            deadline: document.getElementById('taskDeadline').value,
            color: document.getElementById('taskColor').value,
            imageFile: document.getElementById('taskImage').files[0]
          });
        }
        saveTasks();
        closeModal();
        showConfirmation(taskId ? 'Task successfully updated! 🎉' : 'Task successfully created! 🎉');
      });
      async function createTask(taskData) {
        const imageBase64 = taskData.imageFile ?
          await convertImageToBase64(taskData.imageFile) :
          null;
        const newTask = {
          id: Date.now().toString(),
          ...taskData,
          column: taskData.columnType,
          image: imageBase64
        };
        tasks.push(newTask);
        saveTasks();
        renderTask(newTask);
      }

      function convertImageToBase64(file) {
        return new Promise((resolve) => {
          const reader = new FileReader();
          reader.onloadend = () => resolve(reader.result);
          reader.readAsDataURL(file);
        });
      }

      function saveTasks() {
        localStorage.setItem('tasks', JSON.stringify(tasks));
        updateAllCounts();
      }

      function renderTask(task, isUpdate = false) {
        if (isUpdate) {
          // Trouver l'élément existant et le mettre à jour
          const existingTask = document.querySelector(`[data-task-id="${task.id}"]`);
          if (existingTask) {
            const imageHtml = task.image ?
              `<img src="${task.image}" alt="Task image" class="task__image">` : '';
            existingTask.innerHTML = `
              <div class="task__header">
                <h3 class="task__title">${task.title}</h3>
                <div class="task__actions">
                  <button class="action-btn edit-btn">✏️</button>
                  <button class="action-btn delete-btn">🗑️</button>
    </div>
              </div>
              <div class="task__content">
                <p>${task.description}</p>
                ${imageHtml}
              </div>
              <div class="task__footer">
                <span class="task__date">📅 ${task.deadline ? new Date(task.deadline).toLocaleDateString() !== 'Invalid Date' ? new Date(task.deadline).toLocaleDateString() : 'No date' : 'No date'}</span>
              </div>
            `;
            existingTask.style.borderLeft = `4px solid ${task.color}`;
            // Réattacher les écouteurs d'événements
            existingTask.querySelector('.edit-btn').addEventListener('click', () => openEditModal(task.id));
            existingTask.querySelector('.delete-btn').addEventListener('click', () => deleteTask(task.id));
            return;
          }
        }
        const column = document.getElementById(task.column);
        const taskList = column.querySelector('.task-list');
        const taskElement = document.createElement('div');
        taskElement.className = 'task';
        taskElement.draggable = true;
        taskElement.dataset.taskId = task.id;
        taskElement.style.borderLeft = `4px solid ${task.color}`;
        const imageHtml = task.image ?
          `<img src="${task.image}" alt="Task image" class="task__image">` : '';
        taskElement.innerHTML = `
          <div class="task__header">
            <h3 class="task__title">${task.title}</h3>
            <div class="task__actions">
              <button class="action-btn edit-btn">✏️</button>
              <button class="action-btn delete-btn">🗑️</button>
    </div>
          </div>
          <div class="task__content">
            <p>${task.description}</p>
            ${imageHtml}
          </div>
          <div class="task__footer">
            <span class="task__date">📅 ${task.deadline ? new Date(task.deadline).toLocaleDateString() !== 'Invalid Date' ? new Date(task.deadline).toLocaleDateString() : 'No date' : 'No date'}</span>
          </div>
        `;
        taskElement.addEventListener('dragstart', handleDragStart);
        taskElement.addEventListener('dragend', handleDragEnd);
        // Ajouter la tâche après le bouton "Ajouter une tâche" au lieu de l'insérer au début
        const addTaskButton = taskList.querySelector('.add-task');
        if (addTaskButton.nextSibling) {
          taskList.insertBefore(taskElement, addTaskButton.nextSibling);
        } else {
          taskList.appendChild(taskElement);
        }
        // Sauvegarder les tâches
        saveTasks();
        taskElement.querySelector('.edit-btn').addEventListener('click', () => openEditModal(task.id));
        taskElement.querySelector('.delete-btn').addEventListener('click', () => deleteTask(task.id));
      }

      function updateColumnCount(columnType) {
        const column = document.getElementById(columnType);
        const tasksInColumn = column.querySelectorAll('.task-list > .task');
        column.querySelector('.column__count').textContent = tasksInColumn.length;
      }

      function updateHeaderStats() {
        const totalTasks = document.querySelectorAll('.task').length;
        const completedTasks = document.querySelector('#done').querySelectorAll('.task').length;
        const inProgressTasks = document.querySelector('#progress').querySelectorAll('.task').length;
        document.getElementById('totalTasks').textContent = totalTasks;
        document.getElementById('completedTasks').textContent = completedTasks;
        document.getElementById('inProgressTasks').textContent = inProgressTasks;
      }

      function openEditModal(taskId) {
        const task = tasks.find(t => t.id === taskId);
        if (!task) return;
        const form = document.getElementById('taskForm');
        document.getElementById('taskTitle').value = task.title;
        document.getElementById('taskDescription').value = task.description;
        document.getElementById('taskDeadline').value = task.deadline;
        document.getElementById('taskColor').value = task.color;
        document.getElementById('columnType').value = task.column;
        document.getElementById('editTaskId').value = taskId;
        form.dataset.editId = taskId;
        // Changer le texte du bouton pour indiquer une modification
        document.querySelector('#taskForm button[type="submit"]').textContent = 'Update Task';
        // Changer le titre de la modale pour indiquer une modification
        document.querySelector('#taskModal h2').textContent = 'Edit Task';
        document.getElementById('taskModal').classList.add('show');
      }

      function openModal(columnType) {
        document.getElementById('columnType').value = columnType;
        document.getElementById('taskForm').reset();
        document.getElementById('editTaskId').value = '';
        // Réinitialiser le texte du bouton pour indiquer un ajout
        document.querySelector('#taskForm button[type="submit"]').textContent = 'Add Task';
        // Réinitialiser le titre de la modale pour indiquer un ajout
        document.querySelector('#taskModal h2').textContent = 'New Task';
        document.getElementById('taskModal').classList.add('show');
        // Placer le curseur dans le champ du titre
        setTimeout(() => {
          document.getElementById('taskTitle').focus();
        }, 100);
      }

      function loadTasks() {
        // Vider les listes de tâches existantes tout en conservant les boutons "Ajouter une tâche"
        document.querySelectorAll('.task-list').forEach(taskList => {
          // Conserver uniquement le bouton "Ajouter une tâche"
          const addTaskButton = taskList.querySelector('.add-task');
          taskList.innerHTML = '';
          taskList.appendChild(addTaskButton);
        });
        // Charger les tâches depuis le localStorage
        tasks.forEach(task => {
          renderTask(task);
        });
        updateAllCounts();
      }
      initTheme();
      loadTasks();
      document.querySelectorAll('.add-task').forEach(button => {
        button.addEventListener('click', function() {
          const columnType = this.closest('.column').id;
          openModal(columnType);
        });
      });
      document.querySelector('.modal__close').addEventListener('click', closeModal);

      function handleDragStart(e) {
        this.classList.add('dragging');
        this.style.opacity = '0.5';
        e.dataTransfer.setData('text/plain', this.dataset.taskId);
      }

      function handleDragEnd() {
        this.classList.remove('dragging');
        this.style.opacity = '1';
      }
      // Redéfinir la fonction deleteTask à l'intérieur du DOMContentLoaded
      window.deleteTask = deleteTask;
      // Fonction pour fermer la modale d'aide
      function closeHelpModal() {
        document.getElementById('helpModal').classList.remove('show');
      }
      // Ajouter l'écouteur d'événement pour le bouton d'aide
      document.getElementById('helpToggle').addEventListener('click', function() {
        document.getElementById('helpModal').classList.add('show');
      });
      // Exposer la fonction closeHelpModal globalement
      window.closeHelpModal = closeHelpModal;
    });
  </script>
</body>

</html>